<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>服务详情 - FuYuan RPC管理控制台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div th:replace="fragments/header :: header"></div>

<div class="container mt-4">
    <h1>服务详情</h1>
    <h2 th:text="${serviceName}">服务名称</h2>

    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>版本</th>
                <th>分组</th>
                <th>地址</th>
                <th>端口</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="service : ${services}">
                <td th:text="${service.serviceVersion}">-</td>
                <td th:text="${service.serviceGroup}">-</td>
                <td th:text="${service.serviceAddress}">-</td>
                <td th:text="${service.servicePort}">-</td>
                <td>
                    <span th:if="${service.status == 'online'}" class="badge bg-success">在线</span>
                    <span th:if="${service.status == 'offline'}" class="badge bg-secondary">离线</span>
                </td>
            </tr>
            <tr th:if="${services.isEmpty()}">
                <td colspan="5" class="text-center">暂无服务实例</td>
            </tr>
            </tbody>
        </table>
    </div>

    <a href="/services" class="btn btn-secondary">返回服务列表</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>